<template>
  <input v-bind:value="value" class="hmInput" type="text" :[attr]="{success:isOk,err:!isOk}" @blur="blurFn" @input="inputFn">
</template>

<script>
export default {
    // 父传子  1.子定义变量
  props:{
      value:{
        //   表示value 的值结余是字符串也可以是数字
          type:[String,Number]
        
      },
      reg:{
          type:RegExp,//类型是正则表达式
          default:()=>{
            //   默认校验规则，内容不能为空
            return /^.{1,}$/
          }
      }
  },
  data(){
      return{
        isOk :true,  // isOK为True表示校验通过
        attr:'' //动态属性
      }
  },
  created(){
    //   根虎输入框的初始值，设置isOk的初始值
    // 校验输入框的初始值正确，则设置isOk为true，否则为false
    if(this.reg.test(this.value)){
        this.isOk =true
    }else{
        this.isOk =false
    }
  },
  methods:{
    //   失去焦点触发
    blurFn(){
        // 当失去焦点事件属性名为class
        this.attr="class";
        // 手 机号正则表达式
        // let reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
        // 正则表达式提供了TEST方法，用于校验用户输入的内容是否符合正则表达式
        let bool =this.reg.test(this.value)
        if(bool){
         this.isOk = true
        }else{
           this.isOk = false
        }
    },
    inputFn(event){
        this.$emit("input",event.target.value)
    }
  }
}
</script>

<style>
.hmInput {
 width: 100%;
 font-size: 16px;
 color: #666;
 line-height: 2;
 border: none;
 border-bottom: 1px solid #666;
}
 /* 失败的颜色 */
.err {
 color: red;
 border-bottom-color: red;
}
/* 成功的颜色 */
.success {
color: green;
border-bottom-color: green;
} 
</style>